<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *,
        :before,
        :after {
            box-sizing: border-box;
        }
        html,
        body {
            height: 100%;
        }
        html {
            overflow: hidden;
        }
        body {
            margin: 0;
            perspective: 64em;
            background: #222;
            font: 1vmin sans-serif;
        }
        .polyhedral-assembly {
            animation: rot 16s linear infinite;
        }
        .polyhedral-assembly,
        .polyhedral-assembly *,
        .polyhedral-assembly:before {
            position: absolute;
            top: 50%;
            left: 50%;
            transform-style: preserve-3d;
        }
        @keyframes rot {
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
        .polyhedron--prism:nth-child(1) {
            transform: rotate(90deg) rotateX(0deg) translateY(13em);
        }
        .polyhedron--prism:nth-child(2) {
            transform: rotate(90deg) rotateX(120deg) translateY(13em);
        }
        .polyhedron--prism:nth-child(3) {
            transform: rotate(90deg) rotateX(240deg) translateY(13em);
        }
        .polyhedron--prism:nth-child(4) {
            transform: rotateY(0deg) translate(26em);
        }
        .polyhedron--prism:nth-child(5) {
            transform: rotateY(120deg) translate(26em);
        }
        .polyhedron--prism:nth-child(6) {
            transform: rotateY(240deg) translate(26em);
        }
        .polyhedron__face {
            margin: -6.5em;
            border: solid 1px;
            width: 13em;
            height: 13em;
        }
        .polyhedron__face:nth-child(n + 7) {
            overflow: hidden;
            margin: -13em;
            border: none;
            width: 26em;
            height: 26em;
        }
        .polyhedron__face:nth-child(n + 7):before {
            margin: -13em -11.25833em;
            border: solid 1px;
            width: 22.51666em;
            height: 26em;
            transform: scaleY(1.1547) skewX(30deg) rotate(-30deg);
            background: rgba(255, 255, 255, 0.2);
            content: '';
        }
        .polyhedron__face:nth-child(1) {
            transform: rotateY(0deg) translateZ(11.25833em);
            background: rgba(255, 153, 153, 0.2);
        }
        .polyhedron__face:nth-child(2) {
            transform: rotateY(60deg) translateZ(11.25833em);
            background: rgba(255, 255, 153, 0.2);
        }
        .polyhedron__face:nth-child(3) {
            transform: rotateY(120deg) translateZ(11.25833em);
            background: rgba(153, 255, 153, 0.2);
        }
        .polyhedron__face:nth-child(4) {
            transform: rotateY(180deg) translateZ(11.25833em);
            background: rgba(153, 255, 255, 0.2);
        }
        .polyhedron__face:nth-child(5) {
            transform: rotateY(240deg) translateZ(11.25833em);
            background: rgba(153, 153, 255, 0.2);
        }
        .polyhedron__face:nth-child(6) {
            transform: rotateY(300deg) translateZ(11.25833em);
            background: rgba(255, 153, 255, 0.2);
        }
        .polyhedron__face:nth-child(7) {
            transform: rotateX(90deg) translateZ(6.5em) skewX(-30deg) scaleY(0.86603);
        }
        .polyhedron__face:nth-child(8) {
            transform: rotateX(-90deg) translateZ(6.5em) skewX(-30deg) scaleY(0.86603);
        }
    </style>
</head>
<body>
<div class='polyhedral-assembly'>
    <div class='polyhedron--prism'>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
    </div>
    <div class='polyhedron--prism'>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
    </div>
    <div class='polyhedron--prism'>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
    </div>
    <div class='polyhedron--prism'>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
    </div>
    <div class='polyhedron--prism'>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
    </div>
    <div class='polyhedron--prism'>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
        <div class='polyhedron__face'></div>
    </div>
</div>
</body>
</html>